<script setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
import { routes } from './router/index';
import { useRouter } from 'vue-router';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const router = useRouter();
const curPath = router.options.history.location;
const activeMenu = ref('');
if (curPath === '/') {
  // 初次进入
  activeMenu.value = '/main/city';
} else {
  activeMenu.value = curPath;
}
</script>

<template>
  <div class='main'>
    <div class='left'>
      <el-scrollbar>
        <el-menu active-text-color="#ffd04b"
                 background-color="#545c64"
                 :default-active="activeMenu"
                 :default-openeds="['/main','/threejs','/webgl','/web']"
                 text-color="#fff">
          <template v-for="r in routes"
                    :key="r.path">
            <el-sub-menu v-if="r.isMenu"
                         :index="r.path">
              <template #title>
                <el-icon>
                  <message />
                </el-icon>
                <h3>{{ r.name }}</h3>
              </template>
              <template v-for="c in r.children"
                        :key="c.path">
                <el-menu-item @click="() => {
                    router.push({ path: `${r.path}/${c.path}` })
                 }"
                              :index="`${r.path}/${c.path}`">{{ c.name }}</el-menu-item>
              </template>
            </el-sub-menu>
          </template>

        </el-menu>
      </el-scrollbar>
    </div>
    <div class='right'>
      <router-view></router-view>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.main {
  display: grid;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 100%;
  background: #eaf1f6;
  overflow: hidden;
  .left {
    background: #545c64;
  }
  .right {
    padding: 10px;
  }
}
</style>

<style lang="scss">
* {
  user-select: none;
}

/*滚动条整体*/
::-webkit-scrollbar {
  width: 4rem;
  height: 6rem;
  z-index: 9999999;
  cursor: pointer;
}

/*滑块*/
::-webkit-scrollbar-thumb {
  background-color: #0096ff;
  border-radius: 10rem;
  height: 60rem;
  width: 20rem;
  z-index: 9999999;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0096ff;
}

/*滑道*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6rem #e0e7ec;
  border-radius: 2rem;
}

@media screen and (min-width: 2160px) {
  html,
  body {
    font-size: 1.2px;
  }
}

@media screen and (max-width: 2160px) {
  html,
  body {
    font-size: 1.2px;
  }
}

@media screen and (max-width: 1920px) {
  html,
  body {
    font-size: 1px;
  }
}

@media screen and (max-width: 1366px) {
  html,
  body {
    font-size: 0.8px;
  }
}

html,
body,
#app {
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>
